<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="utf-8">
    <title>Cfeng.net</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <link rel="icon" type="shortcut icon" href="/img/favicon.png">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all" />
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style>
        html,body {
            overflow: hidden;
            height: 100%;
            background-size: cover;
        }
        #frameContainer {
            margin-top: 1px;
            /*background-image: linear-gradient(#00ffff, #ff00ff);;*/
            width: 100%;
            height: 630px;
        }

        #frameContainer #divframe {
            width: 100%;
            height: 100%;
            top: 0;
            /*left: 0;*/
            /*transform-origin: top left;*/
             /*transform: scale(0.5)*/
        }

        .footer {
            position:fixed;
            left: 0;
            right:0;
            bottom:0;
            z-index:990;
            height:44px;
            text-align: center;
            line-height:44px;
            padding:0 15px;
            box-shadow:-1px 0 4px
            rgb(0 0 0 / 12%);
            opacity: 0.5;
            background-color:#FAFAFA;
        }
        .footer a {
            color: #00F7DE ; /* linear-gradient(#0000ff, #ff00ff); */
            padding-left: 10px;
            padding-right: 10px;
        }

        .footer a:hover {
            color: #ff5500;
            text-decoration: underline;
            TEXT-DECORATION:none;
        }
    </style>
</head>
<body background="/img/indexbg1.jpg">
<div class="layui-header">
    <ul class="layui-nav" style="background-color: #333;opacity: 0.4;" lay-bar="disabled">
        <li class="layui-nav-item">
            <img alt="" height="70px" src="/img/CfengNet.png" width="140px" />
        </li>
        <li class="layui-nav-item">
            <a href="/sys/toChat">xiao Huan 聊天室<!-- <span class="layui-badge">9</span> --></a>
        </li>
        <li class="layui-nav-item">
            <a href="/sys/toNote">Xiao Huan 云笔记</a>
        </li>
        <li class="layui-nav-item">
            <a href="/sys/toFile" >Xiao Huan 网盘</a>
        </li>
        <li class="layui-nav-item">
            <a href="/sys/welcome" >联系作者</a>
        </li>
        <li class="layui-nav-item" style="float: right;">
            <a href="javascript:"><img alt = "" th:src="@{${chatUser.userHeaderImg}}" class="layui-nav-img"></a>
            <dl class="layui-nav-child">
                <dd><a href="main.html" target="rightFrame">详细信息</a></dd>
                <hr sec:authorize="hasRole('admin')">
                <dd sec:authorize="hasRole('admin')"><a href="/sys/toAdmin">登录后台</a></dd>
                <hr>
                <dd><a href="/logout">退出登录</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item" style="float: right">
            <a href="javascript:void(0)" id="fullScreen" title="全屏"><i class="layui-icon layui-icon-screen-full"></i></a>
        </li>
    </ul>
</div>

<div id="frameContainer" style="height: 100%;">
    <iframe id="divframe" frameborder="0"  scrolling="no"  src="/sys/welcome" name="rightFrame"></iframe>
</div>`

<div class="footer">
    <p>
        " Copyright &copy; 2022 "
        <a href="#" >[Cfeng.net]</a>
        " MIT Licesnsed"
        <a href="" target="_blank">免费声明</a>
        <a href="">Cfeng.net</a>
        <a href="">Cfeng个人简介</a>
        <a href="">备案中</a>
    </p>
</div>
<script src="/layui/layui.js"></script> <!-- 引入后就可以展示二级-->
<script src="/js/JQuerym.js"></script>
<script type="text/javascript">
    $(function () {
        //进入时随机加载图片
        var num = Math.floor(Math.random() * 4);
        var imgUrl = "/img/indexbg" + num + ".jpg";
        $("body").get(0).background = imgUrl;
        //iframe的高度
        // $("#frameContainer").css("height",$("body").css("height") - $(".layui-header").css("height") - $(".footer").css("height"));
    })

    $('#fullScreen').click(function () {
        var v = "layui-icon-screen-full", p = "layui-icon-screen-restore";
        var n = $(this).find("i");
        var s = document.fullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || false;
        if (s) {
            var r = document.exitFullscreen || document.webkitExitFullscreen || document.mozCancelFullScreen || document.msExitFullscreen;
            if (r) {
                r.call(document)
            } else {
                if (window.ActiveXObject) {
                    var u = new ActiveXObject("WScript.Shell");
                    u && u.SendKeys("{F11}")
                }
            }
            n.addClass(v).removeClass(p)
        } else {
            var o = document.documentElement;
            var q = o.requestFullscreen || o.webkitRequestFullscreen || o.mozRequestFullScreen || o.msRequestFullscreen;
            if (q) {
                q.call(o)
            } else {
                if (window.ActiveXObject) {
                    var u = new ActiveXObject("WScript.Shell");
                    u && u.SendKeys("{F11}")
                }
            }
            n.addClass(p).removeClass(v)
        }
    });
</script>
</body>
</html>
